@include('Home.head')
<style>

.partners-title-panel-title font
{
    margin: 20px;
}

.li-font-up div
{
    margin: 18px;
    width: 68px;
    float: left;
}
.am-table {
    color: #333333;
    border-radius: 10px;
    height: 78px;
    font-size: 24px;
    line-height: 78px;
    border: solid 1px #dedede;
}
.am-table>thead{
    background: #ededed;
    border-radius: 10px;
    height: 39px;
    font-size: 13px;
    line-height: 39px;
    border: solid 1px #dedede;
}
.am-table>thead>tr>th,.am-table>tbody>tr>td{
    border:none !important;
    /*padding: .7rem 0;*/
}
.am-table>tbody>tr>td{
    padding: 2rem 1rem;
}
.am-text-nowrap {
    white-space:normal ;
}
@media screen and (max-width: 639px){
    .am-table {
        color: #333333;
        border-radius: 5px;
        height: 39px;
        font-size: 13px;
        line-height: 39px;
        border: solid 1px #dedede;
    }

}
</style>
<body>
<div class="container" id="app">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
            <a href="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="">@{{ title }}</a>
        </h1>
        <div class="am-header-right am-header-nav">
            <a href="#right-link" class="">
                <i class="am-header-icon  am-icon-home"></i>
            </a>
        </div>
    </header>
    <div class="gray-panel">

        <div class="paoduct-title-panel">
            <h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">1</span> 库存信息</h2>
             <div class="am-scrollable-horizontal">
              <table class="am-table am-text-nowrap">
                <thead>
                  <tr>
                    <th >商品名称</th>
                    <th>剩余商品库存量</th>
                    <th>已售商品数量</th>
                    <th style="width: 55px">操作</th>
                  </tr>
                </thead>
                <tbody v-for="(val,inde) in inventorys">
                    <tr v-if="!val.specs_txt">
                        <td >@{{ val.goodsname }}</td>
                        <td>@{{ val.inventory }}</td>
                        <td>@{{ val.sold }}</td>
                        <td style="width: 55px;padding: 10px 5px;"></td>
                    </tr>
                    <tr v-if="val.specs_txt">
                        <td >@{{ val.goodsname }}</td>
                        <td>@{{ val.inventory }}</td>
                        <td>@{{ val.sold }}</td>
                        <td style="width: 55px;padding: 10px 5px;"><button type="button" class="am-btn am-btn-success am-btn-block am-btn-xs am-radius" :class="'td-title'+inde" @click="showSub(inde)">展开</button></td>
                    </tr>
                    <tr v-for="(item,index) in val.specs_txt " :class="'sub-td'+inde" v-show="item.flag">
                        <td >
                            <span v-for="val in item.specs">@{{ val }}</span>
                        </td>
                        <td>@{{ item.number }}</td>
                        <td>/</td>
                        <td style="width: 55px;padding: 10px 5px;"></td>
                    </tr>
                </tbody>
              </table>
            </div>
        </div>


    </div>
    @include('Home.foot')
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: '我的库存',
            inventorys:{}
        },
        methods: {
            showSub(index){
                var tdName = '.sub-td' +index
                var tdTitle = '.td-title'+index
                $(tdName).fadeToggle()
                if(this.inventorys[index].flag) {
                    $(tdTitle).text('展开')
                }else {
                    $(tdTitle).text('收起')
                }
                this.inventorys[index].flag = !this.inventorys[index].flag

            },
            //初始化 系统管理员列表
            initialize: function () {
                $.post("/home/stores/stores", { '_token': '{{csrf_token()}}',class:'inventory' }, function (res) {
                    if (res.code) {
                        app.inventorys = res.data;
                        app.inventorys.forEach(function (item) {
                            item.flag = false
                        })
                        //console.log( app.inventorys);
                    } else {
                        layer.msg(res.data);
                    }
                });
                
            }
        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    })
</script>
</html>
